<template>
	<view class="container">
		<uni-nav-bar fixed statusBar>
			<template v-slot:default>
				<view class="titles">
					消息通知
					<image @click="allmsg" src="/static/trad/xx.png" mode=""></image>
				</view>
			</template>
		</uni-nav-bar>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @click="pageTo(item)">
				<view class="title u-flex u-col-center u-row-between">
					<view class="l">
						{{ item.title }}
					</view>
					<view class="r" v-if="item.see == 0"></view>
				</view>
				<view class="info">
					{{ item.content }}
				</view>
				<view class="more-time u-flex u-col-center u-row-between">
					<view class="time">
						{{ item.createTime | formatISODate }}
					</view>
					<view class="more">查看</view>
				</view>
			</view>
		</view>
		<view class="nolist" v-if="nolist">
			<image src="/static/kong3.png" mode="aspectFill"></image>
			<text>暂无消息</text>
		</view>
		<uni-popup style="" type="center" ref="popup5" :animation="false" :safe-area="false">
			<view class="popup5">
				<view class="contetn">
					<uni-icons @click="close5()" class="icon" size="24" type="closeempty"></uni-icons>
					<view class="title">温馨提示</view>
					<view class="ts">确定要把所有消息标为已读吗？</view>
					<view class="btns_flex">
						<view class="b1" @click="close5()">取消</view>
						<view class="b2" @click="gourl()">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { messageList, messageSeecount, messageAll } from '@/common/http.api.js';
export default {
	data() {
		return {
			list: [],
			params: {
				page: 1,
				limit: 10
			},
			nolist: false
		};
	},
	onLoad() {
		this.getlist();
	},
	onShow() {
		this.getSeeCount();
	},
	onPullDownRefresh() {
		uni.showLoading({
			title: '加载中...'
		});
		this.params.page = 1;
		this.list = [];
		this.getlist();
		setTimeout(() => {
			uni.hideLoading();
			uni.stopPullDownRefresh();
		}, 500);
	},
	onReachBottom() {
		this.params.page++;
		this.getlist();
	},
	methods: {
		close5() {
			this.$refs.popup5.close();
		},
		allmsg() {
			this.$refs.popup5.open();
		},
		gourl() {
			messageAll().then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.params.page = 1;
					this.list = [];
					this.getlist();
					this.close5();
					uni.removeTabBarBadge({
						index: 1
					})
				}
			});
		},
		getSeeCount() {
			messageSeecount({}).then((res) => {
				if (res.code == 200) {
					let num = res.data;
					if (num > 0) {
						uni.setTabBarBadge({
							index: 1,
							text: '新'
						});
					} else {
						uni.removeTabBarBadge({
							index: 1
						});
					}
				}
			});
		},
		getlist() {
			messageList(this.params).then((res) => {
				if (res.code == 200) {
					this.list.push(...res.data.list);
					let total = Math.ceil(res.data.total / this.params.limit);
					this.nolist = total == 0;
				}
			});
		},
		pageTo(item) {
			item.see = 1;
			uni.navigateTo({
				url: `/pages/message/msginfo?id=${item.id}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.popup5 {
	margin-top: 180rpx;
}
.titles {
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
	font-size: 34rpx;
	font-weight: bold;
	image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
		margin-top: 6rpx;
	}
}

.container {
	.nolist {
		padding: 360rpx 30rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;

		image {
			width: 360rpx;
			height: 236rpx;
		}

		text {
			font-size: 28rpx;
			color: #979797;
			margin-top: 20rpx;
		}
	}

	.list {
		width: 710rpx;
		margin: 20rpx auto;

		.item {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.title {
				height: 40rpx;
				line-height: 40rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #11192d;
				text-align: left;

				.l {
					flex: 1;
					width: 1rpx;
					margin-right: 20rpx;
				}

				.r {
					width: 16rpx;
					height: 16rpx;
					background: #ff1717;
					border-radius: 8rpx;
				}
			}

			.info {
				padding: 20rpx 0;
				border-bottom: 2rpx solid #eee;
				font-size: 28rpx;
				color: #979797;
				text-align: left;
			}

			.more-time {
				line-height: 40rpx;
				height: 40rpx;
				font-size: 28rpx;
				color: #979797;
				margin-top: 20rpx;

				.more {
					text-align: right;
				}

				.titme {
				}
			}
		}
	}
}
</style>